<template>
    <div class="home-container flex" >
        <div class="home-wrapper">
            <header class="home-header flex">
                <h1 class="home-header__title">数据库课程设计</h1>
                <img :src="'/public/images/logo.png'" alt="logo" class="home-header__logo">
            </header>

            <main class="home-main">

                <div class="home-main__wrapper">
                    <div class="home-main__search flex">
                        <input type="text" class="home-main__search-input" placeholder="请输入检索词" v-model="searchInputContent">
                        <div class="home-main__search-icon-wrapper flex" @click="clickSearch">
                            <img :src="'/public/images/search.svg'" alt="search-icon" class="home-main__search-icon">
                        </div>
                    </div>

                    <div class="home-main__button flex">
                        <button class="home-main__button-all home-main__button-base" @click="clickDisplayChange(1)">展示全部数据</button>
                        <button class="home-main__button-classify home-main__button-base" @click="clickDisplayChange(2)">展示表单</button>
                        <button class="home-main__button-classify home-main__button-base" @click="clickDisplayChange(0)">清空</button>
                    </div>

                    <div class="home-main__display">
                        <!-- <table class="home-main__display-all" v-if="activeDisplay === 1">

                            <thead>
                                <th 
                                class="home-main__display-th"
                                v-for="item in dataHead"
                                >
                                {{ item }}
                                </th>
                            </thead>

                            <tbody >
                                <tr 
                                v-for="item in bookData"
                                >
                                    <td class="home-main__display-td">{{ item.sortBy }}</td>
                                    <td class="home-main__display-td">{{ item.title }}</td>
                                </tr>
                            </tbody>

                        </table> -->
                        <div class="home-main__info-cards" v-if="activeDisplay===1">
                            <info-card
                            v-for="item in infoCardItems"
                            :key="item.id"
                            :data="item"
                            ></info-card>
                        </div>

                        <div class="home-main__info-form-wrapper"
                        :class="{'home-main__info-form-wrapper--dark':activeDisplay===2}"
                        >
                            <div class="home-main__info-forms">
                            <info-form
                            v-for="item in infoFormItems"
                            :key="item.id"
                            :data="item"
                            class="home-main__info-form"
                            >
                            <div class="home-main__info-form-btn-wrapper flex">
                                <!-- <button class="home-main__info-form-btn" @click="clickDisplayChange(0)">取消</button>
                                <button class="home-main__info-form-btn">确认</button> -->
                                <!-- <el-button type="primary">确认</el-button> -->
                                 <el-button type="primary" class="home-main__info-form-btn">确认</el-button>
                                 <el-button type="primary">取消</el-button>
                            </div>
                            </info-form>
                        </div>
                        </div>

                    </div>
                </div>

            </main>
        </div>
    </div>
</template>

<script setup>
import { onBeforeMount, onMounted, ref } from 'vue';
import infoCard from '@/components/infoCard.vue';
import infoForm from '@/components/infoForm.vue';



const searchInputContent = ref('');
const activeDisplay = ref(0);

const dataHead = ref([
    '分类','标题'
])

const infoCardItems = ref([
    {"imgSrc": "/public/images/infoCard01.png","title": "比提除了最多除了哎哟好摇什么",id:'infoCardItem01'},
])

const infoFormItems = ref([
    {id:'infoFormItem01'},
])

// 搜索
function clickSearch(){
    console.log('input:',searchInputContent.value.trim());
}

// 展示全部
function clickDisplayChange(active){
    // if(active===2){
    //     ChartJS.register(ArcElement, Tooltip, Legend);
    // }else if(active===3){
    //     ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
    // }
    activeDisplay.value = active;
    console.log(activeDisplay.value);
}


// 监听页面变化部分
function setFontSize(){
    const baseWidth = document.documentElement.clientWidth;
    const fontSize = baseWidth/100;
    document.documentElement.style.fontSize = `${fontSize}px`;
    console.log('fontSize: ',document.documentElement.style.fontSize);
}

onBeforeMount(()=>{
    setFontSize();
    // window.devicePixelRatio = 2;
})

onMounted(()=>{
    console.log('Zoom level: ', window.devicePixelRatio);
    window.addEventListener('resize',setFontSize);
})
</script>

<style lang="scss" scoped>
// 此函数已经全局可用，为了书写的时候有提示才放在这里
@function pxToRem($px){
    $baseWidth : 1440px ;
    @return #{($px*100)/$baseWidth}rem;
}

.home-container{
    width: 100%;
    height: 100%;
    background-color: $container-bgc;


    
    .home-wrapper{
        width: 80%;
        height: 80%;
        margin: 0 auto;
        border-radius: 30px;
        box-shadow: 0 0 20px 10px #7198b2;

        .home-header{
            width: 100%;
            height: 10%;
            background-color: $header-bgc;
            border-top-right-radius: 30px;
            border-top-left-radius: 30px;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 5%;

            &__title{
                color: #fff;
                font-weight:700;
            }

            &__logo{
                width: pxToRem(50px);
                height: pxToRem(50px);
                // height: 50%;
            }
        }

        .home-main{
            width: 100%;
            height: 90%;
            background-color: $main-bgc;
            border-bottom-right-radius: 30px;
            border-bottom-left-radius: 30px;
            box-sizing: border-box;
            padding-top: pxToRem(20px);

            &__wrapper{
                width: fit-content;
                margin: 0 auto;
            }

            // 一个模块标准
            &__search{
                width: fit-content;
                height: pxToRem(50px);
                margin: 0 auto;
                // margin-top: pxToRem(20px);

                &-input{
                    width: pxToRem(500px);
                    height: 100%;
                    background-color: transparent;
                    border: 2px solid #afb3ab;
                    border-right: none;
                    border-top-left-radius: 10px;
                    border-bottom-left-radius: 10px;
                    box-sizing: border-box;
                    padding-left: 1em;
                }
                
                &-icon-wrapper{
                    width: pxToRem(50px);
                    height: 100%;
                    background-color: #5b7a92;
                    border: 2px solid #afb3ab;
                    border-left: none;
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                    box-sizing: border-box;

                    &:hover{
                        cursor: pointer;
                    }
                }

                &-icon{
                    width: 70%;
                    height: 70%;
                    margin: 0 auto;
                }
            }

            &__button{
                width: fit-content;
                margin: 0 auto;
                margin-top: pxToRem(20px);

                &-base{
                    font-size: pxToRem(16px);
                    padding: 1em;
                    border-radius: 20px;
                    margin: 0 1em;

                    &:hover{
                        cursor: pointer;
                    }
                }

                &-all{
                    background-color: #ABEBC6;
                    color: #1D8348;
                    &:active{
                        background-color: #58D68D;
                    }
                }

                &-classify{
                    background-color: #AED6F1;
                    color: #1F618D;

                    &:active{
                        background-color: #5499C7;
                    }
                }
            }

            //展示内容模块
            &__display{
                width: pxToRem(700px);
                height: pxToRem(350px);
                box-sizing: border-box;
                padding-top: pxToRem(20px);
                margin-top: pxToRem(20px);
                border: 2px solid #a8acad;
                border-radius: 20px;

                &-all{
                    border-collapse: collapse;
                    width: fit-content;
                    margin: 0 auto;
                }

                &-th,&-td{
                    width: pxToRem(80px);
                    max-width: pxToRem(150px);
                    // white-space: ;
                    word-break: keep-all;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-align: center;
                    border: 1px solid #4a4a4a;
                }

                &-th{
                    background-color: #add8e6; 
                    color: #333333; 
                    font-size: pxToRem(20px);
                    padding: .2em 0;
                }

                &-td{
                    background-color: #f2f2f2; 
                    color: #333333; 
                    font-size: pxToRem(16px);
                    padding: .5em 0;
                }
            }

            // form表单组件
            &__info-form-wrapper{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0;
                z-index: -1;
                transition: opacity ease 1s;
                &--dark{
                    background: rgba(0,0,0,.3);
                    opacity: 1;
                    z-index: 1;

                }
            }

            &__info-forms{
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }

            &__info-form{
                position: relative;
                box-shadow: 0 0 pxToRem(10px) rgba(0,0,0,.5);
                &-btn-wrapper{
                    position: absolute;
                    bottom: pxToRem(10px);
                    right: pxToRem(10px);
                }

                &-btn{
                    font-size: pxToRem(20px);
                    padding: .3em 1em;

                    &:hover{
                        cursor: pointer;
                    }

                    &:active{
                        filter: brightness(80%);
                    }

                }
            }
        }
    }


}
</style>